import React, { Component, Suspense } from "react";
// 同步加载所有组件
// import LazyChildCom from "./LazyChildCom";

// 异步加载组件：
const LazyChildCom = React.lazy(() => import("./LazyChildCom"))


const fallbackEl = React.createElement("div", {
  style: {
    "height": '100vh',
    "backgroundColor": 'green',
    "color": 'white',
    "fontSize": "40px",
    "lineHeight": '100vh',
    "textAlign": "center"
  }
},
  "Loading。。。。"
)
class LazyCom extends Component {

  render() {
    return (
      <div>
        {/* 1. 直接使用这个组件 。提示：好像再低版本里面，一定需要使用Suspense组件*/}
        {/* <LazyChildCom /> */}
        {/* 2. 通过suspense组件来处理, fallback属性的值是一个react元素，react元素可以单独创建，也可以直接通过jsx语法，写个div这些。
        加载异步组件之前，显示fallback指定的元素，  加载异步组件成功后，隐藏fallback的内容。如loading,或者骨架屏页面的效果。
        */}
        <Suspense fallback={fallbackEl}>
          <LazyChildCom />
        </Suspense>
      </div>
    )
  }
}

export default LazyCom